Skip to main content

🕹️ Buttons

Buttons are essential interactive elements that facilitate user interactions within your app. AppStruct offers a variety of prebuilt buttons that can be easily customized to fit your application's design and functionality.

Available Components:​

  • Button
  • Small Button
  • Icon Button
  • Text Link

Button​

1. Add the Button:​

  • Drag and drop the Button onto the Canvas.
  • Place the button where desired and adjust its size using percentage values or by dragging its edges.

2. Set and Customize:​

  • Left Toolbar:
    • Change Text: Modify the button label within the text box.
    • Add Icon: Select and position an icon within the button.
    • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
    • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
  • Right Toolbar:
    • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
    • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Small Button and Icon Button​

1. Add the Button:​

  • Drag and drop the Small Button or Icon Button onto the Canvas.
  • Place the button in the desired location and adjust its size as needed.

2. Set and Customize:​

  • Left Toolbar:
    • Add Icon: Select and position an icon within the button.
    • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
    • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
  • Right Toolbar:
    • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
    • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the toolbar may vary depending on the selected button type.

Text Link​

1. Add the Text Link:​

  • Drag and drop the Text Link component onto the Canvas.
  • Place the text link where desired and adjust its size accordingly.

2. Set and Customize:​

  • Left Toolbar:
    • Change Text: Modify the link text within the text box.
    • Add External Link: Insert a URL to link to an external web source.
    • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
    • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
  • Right Toolbar:
    • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
    • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Best Practices​

  1. Clear Labeling: Ensure button text is concise and descriptive.
  2. Enhance with Icons: Use icons to visually complement the button’s purpose.
  3. Interactive Actions: Always attach a relevant action to guide user flow.
  4. Responsive Styling: Adjust button appearance for different devices using screen-specific styles.
  5. Consistent Customization: Maintain a unified design with consistent colors, borders, and shadows.
  6. Optimize Layout: Use appropriate sizes and spacing for touch-friendly interactions.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].